<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="telephone=no" name="format-detection" />
<title>网易云课堂微专业前端大作业</title>
<meta name="keywords" content="网易云课堂,微专业,Web前端,大作业" />
<meta name="description" content="网易云课堂微专业前端大作业" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="top_msg" id="top_msg">
		<div class="w">
			网易云课堂微专业，帮助你掌握专业技能，令你求职或加薪多一份独特优势！  <a class="top_msg_a1" href="">立即查看></a>
			<a href="javascript:void(0)" onclick="closeTop()" class="fr"><img src="images/close.png" alt="">不再提醒</a>
		</div>
	</div>
	
	<div id="mask"></div>
	<div id="loginWin">
		<div id="loginClose"></div>
		<p>登录网易云课堂</p>
		<input type="text" id="userName" placeholder="帐号" value="studyOnline">
		<input type="password" name="" id="password" placeholder="密码" value="study.163.com">
		<button id="login">登录</button>
	</div>
	<div id="videoWin">
		<div id="videoClose"></div>
		<p>请观看下面的视频</p>
		<video src="http://mov.bn.netease.com/open-movie/nos/mp4/2014/12/30/SADQ86F5S_shd.mp4" width="889" height="500" controls="controls">您的浏览器版本太低，请尝试升级</video>
	</div>
	<div class="w head">
		<div class="fl">
			<img class="fl" src="images/EDU.png" alt="">
			<a href="javascript:void(0)" class="follow" onclick="login()"><img src="images/follow.png" alt=""> 关注</a>
			<a href="javascript:void(0)" class="follow2" ><img src="images/fo.png" alt=""> 已关注<span  onclick="unfollow()">取消</span></a>
			<span class="fans">粉丝 45</span>
		</div>
		<div class="fr">
			<a href="http://open.163.com/" target="_blank">网易公开课</a>
			<a href="http://study.163.com/" target="_blank">云课堂</a>
			<a href="http://www.icourse163.org/" target="_blank">中国大学MOOC</a>
			<a class="search" href="javascript:void(0)"></a>
		</div>
	</div>
	<div class="banner" id="banner">
		<div class="pics" id="pics">
			<div class="banner-list show"><a href="http://open.163.com/" target="_blank"><img src="images/banner1.jpg" alt=""></a></div>
			<div class="banner-list"><a href="http://study.163.com/" target="_blank"><img src="images/banner2.jpg" alt=""></a></div>
			<div class="banner-list"><a href="http://www.icourse163.org/" target="_blank"><img src="images/banner3.jpg" alt=""></a></div>
		</div>
		
		<!--轮播图中的圆点-->
		<div class="point" id="dots">
			<span class="action"></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<div class="w block3f">
		<div class="block3">
			<img src="images/b3.png" alt="">
			<div class="b3c">
				<h4>网易公开课</h4>
				<p>推出国内外名校公开课，涉及广泛的学科，名校老师认真讲解深度剖析，网易视频公开课频道搭建起强有力的网络视频教学平台。</p>
				<a href="http://open.163.com/" target="_blank">了解更多 ></a>
			</div>
		</div>
		<div class="block3">
			<img src="images/b4.png" alt="">
			<div class="b3c">
				<h4>云课堂</h4>
				<p>网易旗下大型在线学习平台，该平台面向学习者提供海量免费、优质课程,创新的个性化学习体验，自由开放的交流互动环境。</p>
				<a href="http://study.163.com/" target="_blank">了解更多 ></a>
			</div>
		</div>
		<div class="block3 mr0">
			<img src="images/b5.png" alt="">
			<div class="b3c">
				<h4>中国大学MOOC</h4>
				<p>是爱课程网携手云课堂打造的在线学习平台，每一个有提升愿望的人,都可以在这里学习中国最好的大学课程，学完还能获得认证证书。</p>
				<a href="http://www.icourse163.org/" target="_blank">了解更多 ></a>
			</div>
		</div>
	</div>
	<div class="f8f8f8">
		<div class="banner2">
			<img src="images/02.jpg" alt="">
		</div>
		<div class="w">
			<div class="list">
				<div class="list_left">
					<ul id="tab-nav" >
						<li class="on">产品设计</li>
						<li>编程语言</li>
				    </ul>
				    <div class="tabcon">
						<ul id="tab-conul">
							<li>
								<img class="listpic" src="" alt="">
								<h5>混音全揭秘 舞曲实战篇 揭秘音乐揭秘...</h5>
								<p class="liname">音频帮</p>
								<p class="licount"><span>510</span></p>
								<p class="liprice">￥800.00</p>
								<div class="details">
									<img class="listpic" src="" alt="">
									<div class="fl">
										<h5>手绘画系列教程</h5>
										<p class="licount">51人在学</p>
										<p class="liname">发布者：几分钟网</p>
										<p class="liname">分类： 手绘设计</p>
									</div>
									<p class="introduce">生活中不乏有很多美好的画面，何不用画笔记录下来呢？那么就跟几分钟网一起来记录美好画面吧！</p>
								</div>
							</li>
						</ul>
						<div class="clear"></div>
					</div>
					<div class="pages fr" id="pages">
						<span class="prev"></span>
						<ul id="pagesUl">
							<li id="pagesindex">1</li><li>2</li><li>3</li><li>4</li><li>5</li>
						</ul>
						<span class="next"></span>
					</div>
				</div>
				<div class="list_right">
					<div class="lrc1 lrc1-sp">
						<h3>机构介绍</h3>
						<p>观看下面的视频来了解吧：</p>
						<img id="videoImg" src="images/video_07.jpg" alt="" >
					</div>
					<div class="lrc1 lrc1-hot">
						<h3>最热排行</h3>
						<div class="hotcoures">
							<ul id="hotcoures">
								<li>
									<img class="hotpic" src="http://img2.ph.126.net/a-aGOCUSei-5SQ76hLRcvA==/6631813234583039264.jpg" alt="">
									<p class="litit">舞曲揭秘音乐揭秘揭秘</pc>
									<p class="licount">21567</p>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="w">
			<div class="fl">
				<img src="images/EDU_2.png" alt="网易教育产品部">
				<p>©2014 icourse163.org 浙ICP备08114786号-1 <br>	
					icourses.cn 京ICP备12020869号-2 京公网安备110102000459-2</p>
			</div>
			<div class="fr">
				<ul>
					<li><span>友情链接：</span></li>
					<li><a href="http://open.163.com/" target="_blank">网易公开课</a></li>
					<li><a href="http://study.163.com/" target="_blank">网易云课堂</a></li>
					<li><a href="http://www.icourse163.org/" target="_blank">中国大学MOOC</a></li>
				</ul>
				<ul>
					<li><span>我们:</span></li>
					<li><a href="">关于</a></li>
					<li><a href="">联系</a></li>
					<li><a href="">关注</a></li>
				</ul>
				<ul>
					<li><span>更多：</span></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">意见反馈</a></li>
				</ul>
			</div>
		</div>
	</div>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="js/js.js"></script>
</body>
</html>
